<template>
  <div class="comment-list">
    <div v-for="(item,index) in list" :key="index">
      <!--一级评论-->
      <div class="comment-first">
        <!--头像和昵称-->
        <div class="info">
          <div>
            <el-avatar :size="50" :src="item.face | toFaceUrl">
              <el-avatar icon="el-icon-user-solid" :size="50"></el-avatar>
            </el-avatar>
          </div>
          <div class="c-first-name">
            <span @click="goAuthorSpace(item.uid)">{{item.name}}</span>
          </div>
          <span class="c-first-date">{{item.date | toTime}}</span>
        </div>
        <!--评论内容-->
        <div class="c-first-content">
          <span>{{item.text}}</span>
          <div class="c-btn">
            <el-button v-if="uuid" type="text" @click="showReply(item,index)">回复</el-button>
            <el-button v-if="item.uid == uuid" type="text" @click="deleteComment(item,index)">删除</el-button>
          </div>
        </div>
        <!--分割线-->
        <div style="margin-left: 60px;">
          <el-divider></el-divider>
        </div>
        <!--动态回复框-->
        <div v-if="isReply[index]" style="margin-left:110px">
          <el-row type="flex" align="middle">
            <el-col :span="2" :pull="2">
              <el-avatar :size="48" :src="userInfo.Face | toFaceUrl">
                <el-avatar icon="el-icon-user-solid" :size="48"></el-avatar>
              </el-avatar>
            </el-col>
            <el-col :span="20" :pull="2">
              <el-input
                type="textarea"
                v-model="replyForm.content"
                rows="3"
                :placeholder="`回复@${replyForm.replyName}`"
              ></el-input>
            </el-col>
            <el-col :span="2" :pull="1">
              <el-button type="primary" @click="replyComment()">回复</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </div>
        <!--二级评论-->
        <div class="c-second" v-for="(reply,i) in item.reply" :key="i">
          <!--头像和昵称-->
          <div class="info">
            <div class="reply-face">
              <el-avatar :size="40" :src="reply.face | toFaceUrl">
                <el-avatar icon="el-icon-user-solid" :size="40"></el-avatar>
              </el-avatar>
            </div>
            <div class="c-second-name">
              <span @click="goAuthorSpace(reply.uid)">{{reply.name}}</span>
            </div>
            <span class="c-second-date">{{reply.date | toTime}}</span>
          </div>
          <!--二级评论内容-->
          <div class="c-second-content">
            <span
              style="color: #00a1d6;cursor:pointer;"
              @click="goAuthorSpace(reply.reply_uid)"
            >@{{reply.reply_name}}</span>
            <span>{{reply.text}}</span>

            <el-button
              class="c-second-btn"
              v-if="reply.uid == uuid"
              type="text"
              @click="deleteReply(reply,index,i)"
            >删除</el-button>
            <el-button
              class="c-second-btn"
              v-if="uuid"
              type="text"
              @click="showReply(reply,index)"
            >回复</el-button>
            <el-divider></el-divider>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { toFaceUrl } from "@/utils/url";
import { deleteComment } from "@/api/commentService";
import storageService from "@/utils/storageService";
export default {
  props: {
    list: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
      formId: {
        id: "",
      },
      isReply: [],
      replyForm: {
        cid: "",
        content: "",
        replyUid: "",
        replyName: "",
      },
    };
  },
  methods: {
    deleteComment(item, index) {
      //删除评论
      this.formId.id = item.cid;
      deleteComment(this.formId).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg);
          this.list.splice(index, 1);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    deleteReply(item, index, i) {
      //删除回复
      this.formId.id = item.cid;
      deleteComment(this.formId).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.msg);
          this.list[index].reply.splice(i, 1);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    showReply(item, index) {
      if (this.isReply[index] == true) {
        this.$set(this.isReply, index, false);
        return;
      }
      for (let i = 0; i < this.list.length; i++) {
        this.$set(this.isReply, i, false);
      }
      this.isReply[index] = true;
      //记录数据
      if (item.last_id) {
        this.replyForm.cid = item.last_id;
      } else {
        this.replyForm.cid = item.cid;
      }
      this.replyForm.replyUid = item.uid;
      this.replyForm.replyName = item.name;
    },
    replyComment() {
      //如果内容为空就关闭回复框并提示
      if (!this.replyForm.content.trim()) {
        for (let i = 0; i < this.list.length; i++) {
          this.$set(this.isReply, i, false);
        }
        return this.$message.error("请输入内容");
      }
      this.$emit("reply", this.replyForm);
      this.replyForm.content = "";
      for (let i = 0; i < this.list.length; i++) {
        this.$set(this.isReply, i, false);
      }
    },
    goAuthorSpace(id) {
      this.$router.push({ name: "userVideo", params: { uid: id } });
    },
  },
  computed: {
    uuid() {
      return this.$store.state.userInfo.Uid;
    },
    userInfo() {
      if (storageService.get(storageService.USER_TOKEN)) {
        return this.$store.state.userInfo;
      } else {
        return null;
      }
    },
  },
  filters: {
    toFaceUrl(name) {
      return toFaceUrl(name);
    },
    toTime(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return year + "-" + month + "-" + day + "  " + hours + ":" + minutes;
    },
  },
};
</script>

.<style>
.info {
  position: relative;
}

.c-first-name {
  position: absolute;
  bottom: 30px;
  left: 60px;
  font-weight: bold;
  cursor: pointer;
  color: #6d757a;
  font-size: 1.2rem;
}

.c-first-date {
  position: absolute;
  bottom: 8px;
  left: 60px;
  font-size: 1rem;
}

.c-first-content {
  margin-left: 60px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.c-btn {
  float: right;
}

.reply-face {
  margin-left: 60px;
}

.c-second-name {
  position: absolute;
  bottom: 26px;
  left: 110px;
  cursor: pointer;
  color: #2e2e2e;
  font-size: 0.8rem;
}

.c-second-date {
  position: absolute;
  bottom: 5px;
  left: 110px;
  font-size: 0.5rem;
}

.c-second-content {
  margin-top: 8px;
  margin-left: 110px;
}

.c-second-btn {
  float: right;
  margin-left: 10px;
}
</style>